<template>
    <div class="main">
        <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
                style="font-weight: bold;">为当前学期本校区就读的学生分配行政班级 (设置各学生的班级) </span> </div>
        <div class="main-body">
            <el-row>
                <el-col :span="14">
                    <div class="main-header float-left">

                        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">

                            <el-form-item label="筛选条件：">
                                <el-select v-model="formInline.nj" placeholder="请选择" clearable @change="NjChanges">
                                    <el-option v-for="(item, index) in ddl_bb_list" :key="index" :label="item.mc"
                                        :value="item.dm">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-select v-model="formInline.bj" placeholder="请选择" clearable>
                                    <el-option v-for="(item, index) in bjList" :key="index" :label="item.BJ + '班'"
                                        :value="item.BJ">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- /bjList -->
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                                <el-button type="primary" icon="el-icon-upload"
                                    @click="importStu">导入学生行政分班信息</el-button>
                            </el-form-item>
                        </el-form>

                    </div>
                    <div class="main-center float-left">
                        <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
                            :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
                            <el-table-column prop="NJMC" label="年级"></el-table-column>
                            <el-table-column prop="BJ" label="班级"></el-table-column>
                            <el-table-column prop="XH" label="学号"></el-table-column>
                            <el-table-column prop="XM" label="学生姓名"></el-table-column>
                            <el-table-column label="管理操作" width="200">
                                <template slot-scope="scope" style="z-index: -9999;">
                                    <el-button @click="handleEdit(scope.row)" type="text" size="small"
                                        style="color: #ff4d4f;" icon="el-icon-edit">编辑</el-button>

                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="footer-pagination">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="formInline.currentPage"
                                :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" :page-size="formInline.limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" style="margin-left: 40px;">
                    <div class="main-header float-left">
                        <div style="text-align: center;">系统中，本校区学生行政分班汇总信息</div>
                    </div>
                    <div class="main-center float-left" style="margin-top: 25px;">
                        <el-table :data="tableData2" height="650" style="width: 100%;margin-top: 6px;"
                            :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
                            <el-table-column prop="NJMC" label="年级"></el-table-column>
                            <!-- /BJMC -->
                            <el-table-column prop="BJMC" label="班级"></el-table-column>
                            <el-table-column prop="BZR" label="班主任"></el-table-column>

                            <el-table-column prop="rs" label="人数"></el-table-column>

                        </el-table>

                        <!-- <div class="footer-pagination">
                            <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                                :current-page="formInline2.currentPage"
                                :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" :page-size="formInline2.limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="formInline2.total">
                            </el-pagination>
                        </div> -->
                    </div>
                </el-col>
            </el-row>


            <el-dialog title="学生行政分班操作窗口" :visible.sync="dialogDetails" width="30%">
                <div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">

                        <el-form-item label="学生姓名：">
                            {{ this.stuInfo.XM }}
                        </el-form-item>
                        <el-form-item label="就读年级：">
                            {{ this.stuInfo.NJMC }}
                        </el-form-item>
                        <el-form-item label="分入行政班：">
                            <el-select v-model="ruleForm.bj" placeholder="请选择" clearable>
                                <el-option v-for="(item, index) in bjList" :key="index" :label="item.BJ + '班'"
                                    :value="item.BJ">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班内序号(学号)：">
                            <el-input v-model="ruleForm.XH" clearable style="width: 200px;">
                            </el-input>
                        </el-form-item>
                        <!-- /班内序号(学号) -->
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">确认分班</el-button>
                            <el-button @click="dialogDetails = false">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-dialog>


            <el-dialog title="学生行政分班信息导入操作窗口" :visible.sync="dialogDetails2" width="40%">
                <div style="height: 140px;background-color: antiquewhite;">
                    <div style="padding: 20px;">1、本功能主要为批量修改学生的行政分班与学号而提供的服务，包括借入本校的学生！</div>
                    <div style="padding-left: 20px;">2、据EXCEL文件来更新学生的行政班级与学号，须先从本页中下载导入模板文件！</div>
                    <div style="padding-left: 20px;padding-top: 20px;">3、模板文件中，行政班级请从"行政班级"的sheet中复制到"导入表中" ,学号保持格式一致！
                    </div>
                </div>
                <div style="padding-top: 10px;">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="300px" class="demo-ruleForm">

                        <el-form-item label="请先生成本校区的导入模板文件:">
                            <el-button type="primary" icon="el-icon-download" @click="downloadFile">生成模板文件</el-button>
                        </el-form-item>
                        <el-form-item label="批量导入学生分班信息的模板文件下载链接：">
                            <el-button type="text" @click="downloadUrl">学生分班信息导入模板下载链接</el-button>
                        </el-form-item>
                        <el-form-item label="请选择导入学生分班信息的EXCEL数据文件：">
                            <el-upload class="upload-demo" ref="upload"
                                action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

                                <div slot="tip" class="el-upload__tip">（已在下载的模板文件中更改学生的班级与学号信息）</div>
                            </el-upload>
                        </el-form-item>


                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogDetails2 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogDetails2 = false">开始从EXCEL导入</el-button>
                </span>
            </el-dialog>



        </div>
    </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
    name: 'Social',
    data() {
        return {
            printOption: {
                id: 'nbprint', // 打印元素的id 不需要携带#号
                popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
            },
            ruleForm: {
                id: "",
                xk: '',
                bj: "",
                type: [],
                type2: [],
              
                xh:""

            },
            bj: "",
            tableData: [],
            tableData2: [],
            formInline: {
                xq: "",
                nj: '',
                xm: '',
                bj: "",
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0
            },
            formInline2: {
                xq: "",
                nj: '',
                xm: '',
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0
            },
            ddl_lb_list: [

            ],//类别 options
            ddl_bb_list: [],//办别 options
            ddl_xz_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '普通',
                    label: '普通'
                },
                {
                    value: '工读',
                    label: '工读'
                },
                {
                    value: '特教',
                    label: '特教'
                },
            ],//性质 options
            ddl_jdfs_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '走读',
                    label: '走读'
                },
                {
                    value: '寄宿',
                    label: '寄宿'
                },
            ],//就读方式 options
            dialogDetails: false,
            dialogDetails2: false,
            JiaoZhiGongInfo: {},
            schoolList: [],
            xklist: [],
            title: "",
            TeacherId: "",
            bjList: [],
            url: "",
            stuInfo:{}
        }
    },
    mounted() {
        this.getTeacherSubjectway()
        this.getTeacherSubjectway2()
        this.getGradeway();
    },
    methods: {
        downloadUrl() {
            if (this.url == "") {
                this.$message({
                    type: 'error',
                    message: "请先点击生成模板文件"
                });
                return
            }
            // console.log(url);
            let link = document.createElement("a");
            //创建一个a标签
            link.style.display = "none";
            //将a标签隐藏
            link.href = this.url;
            //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
            link.setAttribute("download", name);
            // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            document.body.appendChild(link);
            //将上面创建的a标签加入到body的尾部
            link.click();
            //执行a标签
        },
        async getGradeway() {
            let res = await httplogin.getGrade();
            if (res.data.code == 200) {
                this.ddl_bb_list = res.data.data.list

            }
        },
        NjChanges(val) {
            this.selectSchoolClassListway(val)
        },
        async selectSchoolClassListway(val, row) {
            var data = {
                nj: val,
                xqdm: localStorage.getItem("selXQDM")
            }
            var res = await httplogin.selectSchoolClassList(data);

            if (res.data.code == 200) {
                this.bjList = res.data.data.list;
                if (row) {
                    this.ruleForm.bj = row.BJ
                }


            }
        },
        async submitForm() {

            var data={
                stuId:this.stuInfo.STU_ID,
                xh:this.ruleForm.XH,
                bj:this.ruleForm.bj
            }
            var res = await httplogin.updateXzFb(data)
            if (res.data.code == 200) {
                this.$message({
                    type: 'success',
                    message: res.data.msg
                });
                this.getTeacherSubjectway()
                this.getTeacherSubjectway2()
                this.dialogDetails = false

            }
        },

        async getAllDistListway() {
            var res = await httplogin.getAllDistList();
            if (res.data.code == 200) {
                this.xklist = res.data.data.data.dm_xk
                this.ruleForm.xk = this.xklist[0].DM

            }
        },
        async getTeacherSubjectway() {
            let data = {
                xqdm: localStorage.getItem("selXQDM"),
                page: this.formInline.currentPage,
                size: this.formInline.limit,
                nj: this.formInline.nj,
                bj: this.formInline.bj
            }
            let res = await httplogin.selectSchoolClassStudent(data);
            if (res.data.code == 200) {
                this.tableData = res.data.data.list;
                this.formInline.total = res.data.data.total
            }
        },
        async getTeacherSubjectway2() {
            let data = {
                page: this.formInline2.currentPage,
                size: this.formInline2.limit,
                xqdm: localStorage.getItem("selXQDM"),
            }
            let res = await httplogin.selectSchoolClass(data);
            if (res.data.code == 200) {
                this.tableData2 = res.data.data.list;
                // this.formInline2.total = res.data.data.list.length
            }
        },
        addJzgxk() {
            this.getAllDistListway();
            this.dialogDetails = true
        },
        async downloadFile() {

            var res = await httplogin.exportStuInfo();
            if (res.data.code == 200) {
                this.url = res.data.data.usl;
                this.$message({
                    type: 'success',
                    message: "已经获取下载链接"
                });
            }
        },
        handleDelete(row) {
            var arr = []
            arr.push(row.TeacherId)
            var data = {
                mqzjxk: "",
                teacherIds: arr,


            }
            httplogin.updateFaculty(data).then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg, 3);

                    this.getTeacherSubjectway()
                    this.getTeacherSubjectway2()
                }
            })
        },

        //getGrade

        getNowTimeDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = ('0' + (now.getMonth() + 1)).slice(-2);
            const day = ('0' + now.getDate()).slice(-2);
            // const hours = ('0' + now.getHours()).slice(-2);
            // const minutes = ('0' + now.getMinutes()).slice(-2);
            // const seconds = ('0' + now.getSeconds()).slice(-2);
            const formattedTime = year + "年" + month + "月" + day + "日"
            return formattedTime
        },
        sortPingyinfun(list) {
            list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
            return list
        },
        //点击查看详情 open 弹框
        handleClick(row) {
            this.getOnGuardFacultyInfoway(row)
            this.dialogDetails = true
        },
        async getOnGuardFacultyInfoway(val) {
            var data = {
                jzgId: val.TeacherID
            }
            var res = await httplogin.getOnGuardFacultyInfo(data)
            if (res.data.code == 200) {
                this.JiaoZhiGongInfo = res.data.data.jzgInfo

            }
        },
        handleEdit(row) {
            this.stuInfo = row
            this.ruleForm.XH = row.XH
            // /NJMC
            var obj = this.ddl_bb_list.filter((e) => {
                return e.mc == this.stuInfo.NJMC
            })
            this.selectSchoolClassListway(obj[0].dm, row)
            this.dialogDetails = true
        },
        //close 弹框
        handleClose() {
            this.dialogDetails = false
        },
        onSubmit() {
            this.getTeacherSubjectway()
            // console.log(this.formInline);
        },
        handleSizeChange(val) {
            this.formInline.limit = val
            this.getTeacherSubjectway()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.formInline.currentPage = val
            this.getTeacherSubjectway()
            console.log(`当前页: ${val}`);
        },
        handleSizeChange2(val) {
            this.formInline2.limit = val
            this.getTeacherSubjectway2()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange2(val) {
            this.formInline2.currentPage = val
            this.getTeacherSubjectway2()
            console.log(`当前页: ${val}`);
        },
        importStu() {
            this.url = ""
            this.dialogDetails2 = true
        }
    }
}
</script>

<style scoped>
.main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
}

.main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
}

.float-left {
    width: 100%;
    height: auto;
    float: left;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.d-flex {
    display: flex;
    align-items: center;
}

.mr-24 {
    margin-right: 24px;
}

.fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
}

.footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
}

.font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
}
</style>